<template>
  <p class="title">{{ $t('activity.checkin.footer_bonus_title') }}</p>
  <div class="card-list">
    <div v-for="bonus in (activityData.level_rewards || vipAssets)" :key="bonus.level" class="card-item">
      <span class="label">
        <NuxtImg :src="bonus.image" />
      </span>
      <span class="value">
        <span class="value-amount">
          <span class="suffix">{{ apo.user.currency_symbol }}</span>
          <span class="amount">{{ apo.utils.formatAmount(bonus.reward) }}</span>
        </span>
      </span>
    </div>
  </div>
  <!-- 规则说明组件 -->
  <RuleBox :content="activityData.desc" />
</template>

<script setup lang="ts">
defineProps(['activityData', 'vipAssets'])
</script>

<style scoped lang="scss">
.title {
  margin: 0.3rem auto 0.2rem;
  font-size: 0.4rem;
  color: var(--theme-neutral1);
}

.card-list {
  width: 100%;
  color: #FFBF00;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.25rem;

  .card-item {
    width: 100%;
    height: 1.5rem;
    background: #40294F;
    border-radius: 0.3rem;
    display: flex;

    .label {
      font-weight: 400;
      width: 2rem;
      border-radius: 0.3rem 0 0 0.3rem;
      background: #4E346B;
      display: flex;
      align-items: center;
      justify-content: center;

      >img {
        width: 1.4rem;
      }
    }

    .value {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.54rem;

      .value-amount {
        display: flex;
        align-items: center;
        font-size: 0.54rem;

        .suffix {
          font-weight: 400;
          padding-right: 0.05rem;
        }
      }
    }
  }
}
</style>
